import React, {Component} from "react";
import {
	View,
	Text,
	Image,
	StyleSheet,
	FlatList,
	TouchableOpacity,
} from "react-native";
import {observer} from "mobx-react/native";
import UseAPI from "../models/useAPI";

@observer
export default class NewsContent extends Component {
	constructor(props) {
		super(props);
		this.state = {
			refreshing: false,
		}
	}
	componentDidMount() {
		UseAPI.fetchNews();
	}
	_keyExtractor(item) {
		return key = item.id;
	}
	_refreshing = () => {
		const {state} = this.props.navigation;
		UseAPI.fetchNews().then(() => {
			setTimeout(() => {
				//判断网络连接状况;
				global.freshNetwork();
			}, 100)
		});
	}
	_getNewsDetails = (item) => {
		const {navigate} = this.props.navigation;
		navigate("NewsDetails", {details: item.url});
	}
	_renderItem = ({item, index}) => (
		<TouchableOpacity onPress={() => this._getNewsDetails(item)}>
			<View style={styles.container}>
				<View style={styles.newsText}>
					<Text style={styles.textContent}>{item.title}</Text>
					<Text style={styles.titleBottom}>{item.typeName} <Text>{item.userName}</Text></Text>
				</View>
				<View style={styles.newsImg}>
					<Image
						style={styles.imgW} 
						source={{uri: item.contentImg}}
					/>
				</View>
			</View>
		</TouchableOpacity>
	)
	render() {
		return (
			<View style={styles.containerBlock}>
				<FlatList 
					data={UseAPI.newsList}
					renderItem={this._renderItem}
					keyExtractor={this._keyExtractor}
					refreshing={this.state.refreshing}
					onRefresh={this._refreshing}
					ListEmptyComponent={<Text style={{alignSelf: "center", marginTop: 50,}}>正在努力为您加载中...</Text>}
				/>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	containerBlock: {
		flex: 1,
	},
	container: {
		flexDirection: "row",
		padding: 8,
		backgroundColor: gColor.fontColorFive,
		marginBottom: 1,
	},
	newsText: {
		flex: 4,
		paddingRight: 5,
	},
	newsImg: {
		// flex: 2,
	},
	imgW: {
		width: 60,
		height: 60,
	},
	titleBottom: {
		fontSize: gFontSize.three,
		position:"absolute",
		bottom: 5,
	},
	textContent: {
		color: gColor.fontColorSix,
	}
})